
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script charset="utf-8" src="/static/layui/layui.js"></script>

    <script charset="utf-8" src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>

<table id="weather_table" class="layui-hide" id="test" lay-filter="demo">  </table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</ a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</ a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</ a>
</script>

<script charset="utf-8" src="/static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#weather_table'
      ,even: true
    ,url:'/crawiling_weather/cityweather/test'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
        {type:'numbers', title:'序号', width:40, fixed: 'left'}
      ,{field:'id', width:80, title: 'ID', sort: true,align:'center'}
      ,{field:'city', width:100, title: '城市',sort:true,align:'center'}
      ,{field:'date', width:200, title: '日期', sort: true,align:'center'}
      ,{field:'weather', width:80, title: '天气',sort:true,align:'center'}
      ,{field:'windd', title: '风向',  minWidth: 100,sort:true,align:'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'winds', title: '风力', sort: true,align:'center'}
      ,{field:'temp_hight', title: '最高温度', sort: true,align:'center'}
      ,{field:'temp_low', title: '最低温度',sort:true,align:'center'}
       ,{fixed: 'right', title:'操作' ,width: 165, align:'center', toolbar: '#barDemo'}

    ]]
      ,page:true
      ,limit:12
      ,limits:[12,20,30,40,50]

      ,done: function (res, curr, count) {
          // 表格加载完成后自动执行的函数

          $('thead tr').css({'background-color': '#009688', 'color': 'white'})

      }



  });
   //监听行工具事件
  table.on('tool(demo)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){
      layer.msg('编辑操作');
    }
  });


});
</script>


</body>
</html>